<template>
  <div>
    <el-card>
      <CategorySelector
        @getid="getid"
        :ischeck="isSpuFormShow || isSkuFormShow"
      ></CategorySelector>
    </el-card>

    <el-card style="margin: 20px 0">
      <div v-show="!isSpuFormShow && !isSkuFormShow">
        <!-- 添加按钮 -->
        <el-button type="primary" icon="el-icon-plus" @click="toSpuForm('add')"
          >添加SPU</el-button
        >
        <!-- 属性列表 -->
        <el-table style="width: 100%; margin: 10px 0" border :data="SpuInfo">
          <el-table-column
            prop="prop"
            label="序号"
            width="80"
            type="index"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="spuName" label="SPU名称" width="width">
          </el-table-column>
          <el-table-column prop="description" label="SPU描述" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="scope">
              <el-button
                style="margin: 5px"
                size="mini"
                icon="el-icon-circle-plus-outline"
                type="success"
                @click="addsku(scope.$index, scope.row)"
                title="添加sku"
              ></el-button>
              <el-button
                style="margin: 5px"
                size="mini"
                type="warning"
                icon="el-icon-edit-outline"
                @click="toSpuForm('set', scope)"
                title="修改spu"
              ></el-button>
              <el-button
                style="margin: 5px"
                size="mini"
                type="info"
                icon="el-icon-view"
                @click="handleEdit(scope.$index, scope.row)"
                title="查看sku"
              ></el-button>
              <el-button
                style="margin: 5px"
                size="mini"
                type="danger"
                icon="el-icon-delete"
                title="删除spu"
                @click="Delete(scope.$index, scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <el-pagination
          style="text-align: center"
          :current-page="page"
          :pager-count="5"
          :page-sizes="[3, 5, 8]"
          :page-size="limit"
          layout=" prev, pager, next ,jumper,->,sizes,total"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <!-- 添加修改spu页面 -->
      <SpuForm
        v-show="isSpuFormShow"
        :visible.sync="isSpuFormShow"
        ref="SpuForm"
        @backSuccess="backSuccess"
      ></SpuForm>
      <!-- 添加sku页面 -->
      <SkuForm v-show="isSkuFormShow"
      :visible.sync="isSkuFormShow"
      ref="SkuForm"></SkuForm>
    </el-card>
  </div>
</template>

<script>
import SkuForm from "@/views/product/Spu/components/SkuForm";
import SpuForm from "@/views/product/Spu/components/SpuForm";
export default {
  name: "Spu",
  components: {
    SkuForm,
    SpuForm,
  },
  data() {
    return {
      page: 1,
      limit: 3,
      total: 0,
      ischeck: false,
      idList: {},
      SpuInfo: [],
      isSpuFormShow: false,
      isSkuFormShow: false,
    };
  },
  methods: {
    /* 当传入category3Id时，请求列表数据 */
    getid(id) {
      /* console.log(id) */
      if (!id) {
        this.idList = {};
        return;
      }
      this.idList = id;
      /* console.log(this.idList.category3Id) */
      this.GetSpuList();
    },
    /* 请求列表数据  */
    async GetSpuList() {
      try {
        const re = await this.$api.spu.GetSpuList(
          this.page,
          this.limit,
          this.idList.category3Id
        );
        if (re.code === 20000 || re.code === 200) {
          /* this.$message.success("获取数据成功"); */
          this.SpuInfo = re.data.records;
          this.total = re.data.total;
          /* console.log(this.SpuInfo); */
        } else {
          this.$message.error("获取数据失败");
        }
      } catch (error) {
        this.$message.error("请求获取数据失败");
      }
    },
    /* 改变每页数据展示数量 */
    handleSizeChange(limit) {
      this.limit = limit;
      this.GetSpuList();
    },
    /* 切换当前展示页 */
    handleCurrentChange(page) {
      this.page = page;
      this.GetSpuList();
    },
    /* 点击添加或修改spu按钮 */
    toSpuForm(type, data) {
      /*点击添加或修改spu按钮 SpuForm请求获取初始化去数据 */
      if (type === "add") {
        /* 从添加按钮进入SpuForm 发送初始化请求*/
        this.$refs.SpuForm.fromAdd(this.idList);
      } else if (type === "set") {
        /* 从修改按钮进入spuForm 发送初始化请求*/
        /* console.log(data) */
        let spuId = data.row.id;
        this.$refs.SpuForm.fromSet(spuId, this.idList);
      }
      this.isSpuFormShow = true;
    },
    //删除
    async Delete($index, row) {
      const re = await this.$api.spu.deleteSpu(row.id);
      if (re.code === 20000 || re.code === 200) {
        this.$message.success("删除spu成功");
        this.page = this.SpuInfo.length > 1 ? this.page : this.page - 1;
        this.GetSpuList();
      }
    },
    backSuccess(spuId) {
      if (spuId) {
        this.GetSpuList();
      } else {
        this.page = 1;
        this.GetSpuList();
      }
    },

    //添加sku
    addsku($index, row) {
      this.isSkuFormShow = true;
      this.$refs.SkuForm.getinitdata(row,this.idList)
      /* console.log(row) */
    },
  },
};
</script>

<style>
</style>